﻿<%@ Page Title="Point of Sale System" Language="C#" MasterPageFile="~/Site.master"
    AutoEventWireup="true" CodeBehind="Pagos.aspx.cs" Inherits="POSGui.Presentacion.Pagos" %>

<%--@ Register Assembly="CrystalDecisions.Web, Version=14.0.2000.0, Culture=neutral, PublicKeyToken=692fbea5521e1304"
    Namespace="CrystalDecisions.Web" TagPrefix="CR" --%>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">

    /**
    * Funcion que se dispara cuando hay un cambio en el textbox de "Efectivo"
    */
    function updateCardOrDifferenceFromCash() {
        
        var index = document.getElementById('<%= ListaTipoDePago.ClientID %>').selectedIndex;
        var tipoDePago = document.getElementById('<%= ListaTipoDePago.ClientID %>').options[index].value;

        //Si el tipo de pago es "Efectivo"
        if (tipoDePago == "Efectivo") {
            
            //Si es un número decimal de dos digitos saca el resultado de la diferencia automáticamente
            if (document.getElementById('<%= CashDecimalValidation.ClientID %>').isvalid &
                 document.getElementById('<%= NegativeCardOrDifferenceValidator.ClientID %>').isvalid &
                  document.getElementById('<%= RequiredCashField.ClientID %>').isvalid) {
                var total = document.getElementById('<%= TotalTexto.ClientID %>').innerHTML;
                var efectivo = document.getElementById('<%= EfectivoText.ClientID %>').value;
                var diferencia = parseFloat(efectivo) - parseFloat(total);
                document.getElementById('<%= DiferenciaText.ClientID %>').innerHTML = diferencia;
                document.getElementById('<%= ErrorSummary.ClientID %>').innerHTML = "";
                document.getElementById('<%= PaymentButton.ClientID %>').disabled = false;
            }
            
            //Si no es un número decimal de dos digitos limpia el resultado de la diferencia 
            //en caso de que haya un resultado anterior
            else {
                document.getElementById('<%= DiferenciaText.ClientID %>').value = "";
                document.getElementById('<%= ErrorSummary.ClientID %>').innerHTML = "Error: Debe ingresar un monto válido. Este debe ser mayor o igual al total."
                document.getElementById('<%= PaymentButton.ClientID %>').disabled = true;
            }

        }

        //Si el tipo de pago es "Mixto"
        else if (tipoDePago == "Mixto") {
            
            //Si es un número decimal de dos digitos saca el resultado de la tarjeta automáticamente
            if (document.getElementById('<%= CashDecimalValidation.ClientID %>').isvalid &
                 document.getElementById('<%= NegativeCardOrDifferenceValidator.ClientID %>').isvalid &
                  document.getElementById('<%= RequiredCashField.ClientID %>').isvalid) {
                var total = document.getElementById('<%= TotalTexto.ClientID %>').innerHTML;
                var efectivo = document.getElementById('<%= EfectivoText.ClientID %>').value;
                var tarjeta = parseFloat(total) - parseFloat(efectivo);
                document.getElementById('<%= TarjetaTextMixto.ClientID %>').value = tarjeta;
                document.getElementById('<%= ErrorSummary.ClientID %>').innerHTML = "";
                document.getElementById('<%= PaymentButton.ClientID %>').disabled = false;
            }
            
            //Si no es un número decimal de dos digitos limpia el resultado de la tarjeta 
            //en caso de que haya un resultado o input anterior
            else {
                document.getElementById('<%= TarjetaTextMixto.ClientID %>').value = "";
                document.getElementById('<%= PaymentButton.ClientID %>').disabled = true;
                document.getElementById('<%= ErrorSummary.ClientID %>').innerHTML = "Error: Debe ingresar un monto válido. Este debe ser menor al total.";
            }
        }
    }

    /**
    * Funcion que se dispara cuando hay un cambio en el textbox de "TarjetaTextMixto"
    */
    function updateCashFromCard() {

        if (document.getElementById('<%= CardDecimalValidation.ClientID %>').isvalid
            & document.getElementById('<%= NegativeCashValidator.ClientID %>').isvalid
             & document.getElementById('<%= RequiredCardField.ClientID %>').isvalid) {
            var total = document.getElementById('<%= TotalTexto.ClientID %>').innerHTML;
            var tarjeta = document.getElementById('<%= TarjetaTextMixto.ClientID %>').value;
            var cash = parseFloat(total) - parseFloat(tarjeta);
            document.getElementById('<%= EfectivoText.ClientID %>').value = cash;
            document.getElementById('<%= ErrorSummary.ClientID %>').innerHTML = "";
            document.getElementById('<%= PaymentButton.ClientID %>').disabled = false;
        }
        else {
            document.getElementById('<%= EfectivoText.ClientID %>').value = "";
            document.getElementById('<%= PaymentButton.ClientID %>').disabled = true;
            document.getElementById('<%= ErrorSummary.ClientID %>').innerHTML = "Error: Debe ingresar un monto válido. Este debe ser menor al total."
        }
    }


    /**
    * Funcion que se dispara cuando hay un cambio en el textbox de "TarjetaTextMixto"
    * para actualizar la validacion del validation asociado a este campo.
    * @return: Bool true si el resultado de la resta entre el total y el campo es > 0 y false si es <=
    */
    function isValidCardInput(source, arguments) {

        try{
            var efectivo = parseFloat(document.getElementById('<%= TotalTexto.ClientID %>').innerHTML) - parseFloat(arguments.Value)

            if (efectivo > 0) {
                arguments.IsValid = true;
            }
            else {
                arguments.IsValid = false;
            }
        }
        catch(e){
            arguments.IsValid = false;
        }
    }

    /**
    * Funcion que se dispara cuando hay un cambio en el textbox de "TarjetaTextMixto"
    * para actualizar la validacion del validation asociado a este campo.
    * @return: Bool true si el resultado de la resta entre el total y el campo es > 0 y false si es <=
    */
    function isValidCashInput(source, arguments) {

        var index = document.getElementById('<%= ListaTipoDePago.ClientID %>').selectedIndex;
        var tipoDePago = document.getElementById('<%= ListaTipoDePago.ClientID %>').options[index].value;

        if (tipoDePago == "Efectivo") {
            try {
                var efectivo = parseFloat(arguments.Value) - parseFloat(document.getElementById('<%= TotalTexto.ClientID %>').innerHTML)

                if (efectivo >= 0) {
                    arguments.IsValid = true;
                }
                else {
                    arguments.IsValid = false;
                }
            }
            catch (e) {
                arguments.IsValid = false;
            }
        }
        else if (tipoDePago == "Mixto") {

            try {
                var efectivo = parseFloat(document.getElementById('<%= TotalTexto.ClientID %>').innerHTML) - parseFloat(arguments.Value)

                if (efectivo > 0) {
                    arguments.IsValid = true;
                }
                else {
                    arguments.IsValid = false;
                }
            }
            catch (e) {
                arguments.IsValid = false;
            }
        }
    }

    /**
    * Funcion que se dispara cuando hay un cambio en algun textbox relacionado con la informacion de la tarjeta.
    * Deshabilita el boton de pagar en caso de ke no se cumpla una validacion
    */
    function IsCardInformationValid() {
        if (document.getElementById('<%= RequiredNombreTarjetaField.ClientID %>').isvalid
            & document.getElementById('<%= RequiredNumeroTarjetaField.ClientID %>').isvalid
             & document.getElementById('<%= RequiredCodigoTarjetaField.ClientID %>').isvalid
                & document.getElementById('<%= RequiredVencimientoTarjetaField.ClientID %>').isvalid
                    & document.getElementById('<%= CardCodeValidator.ClientID %>').isvalid
                        & document.getElementById('<%= CardNumberValidator.ClientID %>').isvalid
                            & document.getElementById('<%= CardExpirationValidator.ClientID %>').isvalid) {

            document.getElementById('<%= PaymentButton.ClientID %>').disabled = false;
        }
        else {
            document.getElementById('<%= PaymentButton.ClientID %>').disabled = true;
        }
    }

    /*
    * Funcion que permite cerrar el cuadro de diagolo desde el cliente
    */
    function hideModalPopupViaClient() {
        var modalPopupBehavior = $find('<%= MensajePopUp.ClientID %>');
        modalPopupBehavior.hide();
        return false;
    }

</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>Módulo de Ventas</h2>
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <input id="hidden2" type="hidden" runat="server" />
    <input id="hidden1" type="hidden" runat="server" />
    <ajaxToolkit:ModalPopupExtender ID="MensajePopUp" runat="server" TargetControlID="hidden1"
        BackgroundCssClass="modalBackground" CancelControlID="btnClosePopUp" PopupControlID="PopUpPanel"
        OkControlID="btnOkPopUp" OnCancelScript="return false;" OnOkScript="return true;"
        DropShadow="True">
    </ajaxToolkit:ModalPopupExtender>
    <asp:Panel ID="PopUpPanel" runat="server" CssClass="modalPopup" Style="display: none;">
        <asp:Label ID="LabelTitulo" runat="server" Text="Titulo"></asp:Label>
        <asp:Label ID="LabelMensaje" runat="server" Text="Mensaje"></asp:Label>
        <div style="text-align: center; width: 100%; margin-top: 5px;">
            <asp:TextBox ID="TextboxAutorizacion" runat="server" MaxLength="20" Visible="False"></asp:TextBox>            
            <br />
            <asp:Button ID="btnOkPopUp" runat="server" Text="Autorizar" Width="75px"  UseSubmitBehavior="False" />
            <asp:Button ID="btnClosePopUp" runat="server" Text="Cancelar" Width="75px" OnClientClick="hideModalPopupViaClient(); return false;" />
        </div>
    </asp:Panel>
    <asp:Table ID="Table1" runat="server" Width="865px">
        <asp:TableRow Height="80px" Font-Size="40px" ForeColor="#EE670D" HorizontalAlign="Center">
            <asp:TableCell HorizontalAlign="Right">TOTAL A PAGAR:¢ </asp:TableCell>
            <asp:TableCell HorizontalAlign="Left">
                <asp:Label runat="server" ID="TotalTexto">2600.33</asp:Label>
            </asp:TableCell>
        </asp:TableRow>
    </asp:Table>
    <asp:Table runat="server" Width="865px">
        <asp:TableFooterRow>
            <asp:TableCell HorizontalAlign="Center">
                <asp:Label ID="ErrorSummary" CssClass="failureNotification" runAt="Server"/>
            </asp:TableCell></asp:TableFooterRow></asp:Table><asp:Table ID="Table2" runat="server" Width="865px">    
            <asp:TableRow Height="50px" >
                <asp:TableCell Width="430px" Font-Size="25px" HorizontalAlign="Right">Tipo de pago:</asp:TableCell><asp:TableCell  HorizontalAlign="Left" Height="25px" VerticalAlign="Middle">
                    <asp:DropDownList Font-Size="25px" Width="160px" Height="30px" ID="ListaTipoDePago" runat="server" AutoPostBack="true" OnSelectedIndexChanged="TypeOfPaymentChange">
                        <asp:ListItem>Efectivo</asp:ListItem>
                        <asp:ListItem>Tarjeta</asp:ListItem>
                        <asp:ListItem>Mixto</asp:ListItem>
                    </asp:DropDownList>
                </asp:TableCell></asp:TableRow><asp:TableRow id="FilaEfectivo" Height="50px">
                <asp:TableCell Width="430px" Font-Size="25px" HorizontalAlign="Right">Cancela en efectivo:</asp:TableCell><asp:TableCell HorizontalAlign="Left"  >
                    <asp:TextBox OnChange="updateCardOrDifferenceFromCash();" ID="EfectivoText" runat="server" Font-Size="25px" Width="160px" Height="25px"></asp:TextBox>
                    <asp:RegularExpressionValidator id="CashDecimalValidation" 
                            ControlToValidate="EfectivoText"
                            CssClass="failureNotification" runat="server"
                            ValidationExpression="^(^[1-9]+\d*(\.\d{1,2})$)|(^[1-9]+\d*$)"></asp:RegularExpressionValidator>
                    <asp:CustomValidator runat="server" 
                     ID="NegativeCardOrDifferenceValidator" 
                     ControlToValidate="EfectivoText" 
                     CssClass="failureNotification"
                     ClientValidationFunction="isValidCashInput" 
                     ValidationGroup="PaymentValidation"></asp:CustomValidator>
                     <asp:RequiredFieldValidator runat="server"
                     ID="RequiredCashField"
                     ControlToValidate="EfectivoText" 
                     CssClass="failureNotification"
                     ValidationGroup="PaymentValidation" ErrorMessage="El siguiente campo es obligatorio">*</asp:RequiredFieldValidator>
                    <ajaxToolkit:ValidatorCalloutExtender ID="RequiredCashFieldValidatorCalloutExtender" runat="server" TargetControlID="RequiredCashField" HighlightCssClass="validatorCalloutHighlight">
                    </ajaxToolkit:ValidatorCalloutExtender>
                </asp:TableCell></asp:TableRow><asp:TableRow id="FilaTarjeta" Height="50px" Visible="false">
                <asp:TableCell Width="430px" Font-Size="25px" HorizontalAlign="Right">Cancela en tarjeta:</asp:TableCell><asp:TableCell HorizontalAlign="Left"  >
                     <asp:Label id="TarjetaText" runat="server"></asp:Label>
                     <asp:TextBox Visible="false" OnChange="updateCashFromCard();" ID="TarjetaTextMixto" runat="server" Font-Size="25px" Width="160px" Height="25px"></asp:TextBox>
                     <asp:RegularExpressionValidator 
                            ControlToValidate="TarjetaTextMixto" ID="CardDecimalValidation"
                            CssClass="failureNotification" runat="server" 
                            ValidationExpression="(^[1-9]+\d*(\.\d{1,2})$)|(^[1-9]+\d*$)" 
                            ValidationGroup="PaymentValidation"></asp:RegularExpressionValidator>
                     <asp:CustomValidator runat="server" 
                     ID="NegativeCashValidator" 
                     ControlToValidate="TarjetaTextMixto" 
                     CssClass="failureNotification"
                     ClientValidationFunction="isValidCardInput" 
                     ValidationGroup="PaymentValidation"></asp:CustomValidator>
                     <asp:RequiredFieldValidator runat="server"
                     ID="RequiredCardField"
                     ControlToValidate="TarjetaTextMixto" 
                     CssClass="failureNotification"
                     ValidationGroup="PaymentValidation"></asp:RequiredFieldValidator>
                </asp:TableCell></asp:TableRow><asp:TableRow id="FilaNombreTarjeta" Height="50px" Visible="false">
                <asp:TableCell Width="430px" Font-Size="25px" HorizontalAlign="Right">Nombre en tarjeta:
                </asp:TableCell><asp:TableCell HorizontalAlign="Left"  >
                    <asp:TextBox ID="NombreTarjetaText" runat="server" Font-Size="25px" Width="160px" Height="25px" MaxLength="20" onChange="IsCardInformationValid();" >
                    </asp:TextBox>
                     <asp:RequiredFieldValidator runat="server"
                         ID="RequiredNombreTarjetaField"
                         ControlToValidate="NombreTarjetaText" 
                         CssClass="failureNotification"
                         ValidationGroup="PaymentCardValidation" ErrorMessage="Debe de ingresar un nombre para la tarjeta">*
                     </asp:RequiredFieldValidator>
                     <ajaxToolkit:ValidatorCalloutExtender ID="RequiredNombreTarjetaFieldExtender"  runat="server" TargetControlID="RequiredNombreTarjetaField" HighlightCssClass="validatorCalloutHighlight">
                     </ajaxToolkit:ValidatorCalloutExtender>
                </asp:TableCell></asp:TableRow><asp:TableRow id="FilaNumeroTarjeta" Height="50px" Visible="false">
                <asp:TableCell Width="430px" Font-Size="25px" HorizontalAlign="Right">Número de tarjeta:</asp:TableCell><asp:TableCell HorizontalAlign="Left"  >
                    <asp:TextBox ID="NumeroTarjetaText" runat="server" Font-Size="25px" Width="160px" Height="25px" MaxLength="16" onChange="IsCardInformationValid();"></asp:TextBox>
                     <asp:RequiredFieldValidator runat="server"
                         ID="RequiredNumeroTarjetaField"
                         ControlToValidate="NumeroTarjetaText" 
                         CssClass="failureNotification"
                         ValidationGroup="PaymentCardValidation" ErrorMessage="Por favor ingrese un número">*
                     </asp:RequiredFieldValidator>
                     <ajaxToolkit:ValidatorCalloutExtender ID="NumeroTarjetaRequiredValidatorExtender" runat="server" TargetControlID="RequiredNumeroTarjetaField" HighlightCssClass="validatorCalloutHighlight">                     
                    </ajaxToolkit:ValidatorCalloutExtender>
                     <asp:RegularExpressionValidator                          
                            ControlToValidate="NumeroTarjetaText" ID="CardNumberValidator"
                            CssClass="failureNotification" runat="server" 
                            ValidationExpression="(^\d{16}$)" 
                            ValidationGroup="PaymentCardValidation" ErrorMessage="El numero debe de ser de 16 digitos">*
                     </asp:RegularExpressionValidator>
                    <ajaxToolkit:ValidatorCalloutExtender ID="NumeroTarjetaValitatorExtender" runat="server" TargetControlID="CardNumberValidator" HighlightCssClass="validatorCalloutHighlight">
                    </ajaxToolkit:ValidatorCalloutExtender>
                </asp:TableCell></asp:TableRow><asp:TableRow id="FilaCodigoTarjeta" Height="50px" Visible="false">
                <asp:TableCell Width="430px" Font-Size="25px" HorizontalAlign="Right">Código de Seguridad:</asp:TableCell><asp:TableCell HorizontalAlign="Left"  >
                     <asp:TextBox ID="CodigoTarjetaText" runat="server" Font-Size="25px" Width="160px" Height="25px" MaxLength="3" onChange="IsCardInformationValid();"></asp:TextBox>
                     <asp:RequiredFieldValidator runat="server"
                         ID="RequiredCodigoTarjetaField"
                         ControlToValidate="CodigoTarjetaText" 
                         CssClass="failureNotification"
                         ValidationGroup="PaymentCardValidation" ErrorMessage="El código de  seguridad no puede ser vacío">*
                     </asp:RequiredFieldValidator>
                     <asp:RegularExpressionValidator 
                            ControlToValidate="CodigoTarjetaText" ID="CardCodeValidator"
                            CssClass="failureNotification" runat="server" 
                            ValidationExpression="(^\d{3}$)" 
                            ValidationGroup="PaymentCardValidation" ErrorMessage="Ingrese unicamente números">*
                     </asp:RegularExpressionValidator>
                    <ajaxToolkit:ValidatorCalloutExtender ID="RequiredCodigoTarjetaFieldExtender" runat="server" TargetControlID="RequiredCodigoTarjetaField" HighlightCssClass="validatorCalloutHighlight">
                    </ajaxToolkit:ValidatorCalloutExtender>
                    <ajaxToolkit:ValidatorCalloutExtender ID="CardCodeValidatorExtender" runat="server" TargetControlID="CardCodeValidator" HighlightCssClass="validatorCalloutHighlight">
                    </ajaxToolkit:ValidatorCalloutExtender>
                </asp:TableCell></asp:TableRow><asp:TableRow id="FilaVencimientoTarjeta" Height="50px" Visible="false">
                <asp:TableCell Width="430px" Font-Size="25px" HorizontalAlign="Right" onChange="IsCardInformationValid();">Fecha de Vencimiento:</asp:TableCell><asp:TableCell HorizontalAlign="Left"  >
                    <asp:TextBox ID="VencimientoText" runat="server" Font-Size="25px" Width="160px" Height="25px" MaxLength="5"></asp:TextBox>

                    <ajaxToolkit:TextBoxWatermarkExtender ID="VencimientoTextWatermark" runat="server" WatermarkText="mm/aa" TargetControlID="VencimientoText" WatermarkCssClass="watermark">
                         </ajaxToolkit:TextBoxWatermarkExtender>  
                    <ajaxToolkit:CalendarExtender ID="VencimientoTextCalendar" runat="server" TargetControlID="VencimientoText" TodaysDateFormat="MMMM, yyyy" DefaultView="Years" Format="MM/yy">                    
                    </ajaxToolkit:CalendarExtender>                  
                     <asp:RequiredFieldValidator runat="server"
                         ID="RequiredVencimientoTarjetaField"
                         ControlToValidate="VencimientoText" 
                         CssClass="failureNotification"
                         ValidationGroup="PaymentCardValidation">*
                     </asp:RequiredFieldValidator>
                     <asp:RegularExpressionValidator 
                            ControlToValidate="VencimientoText" ID="CardExpirationValidator"
                            CssClass="failureNotification" runat="server" 
                            ValidationExpression="(^((0[1-9])|(1[0-2]))\/\d{2}$)" 
                            ValidationGroup="PaymentCardValidation" ErrorMessage="Por favor digite la fecha de vencimiento de manera correcta">*
                     </asp:RegularExpressionValidator>
                     <ajaxToolkit:ValidatorCalloutExtender ID="CardExpirationValidatorValidatorExtender" runat="server" TargetControlID="CardExpirationValidator" HighlightCssClass="validatorCalloutHighlight">
                     </ajaxToolkit:ValidatorCalloutExtender>
                </asp:TableCell></asp:TableRow><asp:TableRow id="FilaDiferencia" Height="50px">
                <asp:TableCell Width="430px" Font-Size="25px" HorizontalAlign="Right">Diferencia:</asp:TableCell><asp:TableCell  Font-Size="25px" HorizontalAlign="Left"  >
                    <asp:Label ID="DiferenciaText" runat="server"></asp:Label>
                </asp:TableCell></asp:TableRow></asp:Table><asp:Table ID="Table3" runat="server" Width="865px">
            <asp:TableRow Height="100px" Font-Size="30px"  HorizontalAlign="Center">
                <asp:TableCell HorizontalAlign="Center">
                    <asp:ImageButton ImageUrl="~/Graphics/Sales/Pagar.jpg" runAt="server" id="PaymentButton" ValidationGroup="PaymentCardValidation" OnClick="Pagar" />
                </asp:TableCell></asp:TableRow></asp:Table>
                <%-- %>CR:CrystalReportSource ID="ReceiptSource" runat="server">
    </CR:CrystalReportSource--%>
</asp:Content>
